<template>
    <div class="fullScreen">
        <m-header :msg="'注册'"></m-header>
        <div class="scroll-box">
            <!-- 请输入介绍人账号 -->
            <div class="flex-box flex-ac line-box">
                <div class="iconSize-125 icon_yh mar-r"></div>
                <div class="flex-f1 bor-b-g">
                    <input class="wd-fh inp" placeholder="请输入介绍人账号"/>
                </div>
            </div>
            <div class="flex-box flex-ac tx-line">
                介绍人账号（如果没有，可不填写）
            </div>
            <!-- 请输入用户名 -->
            <div class="flex-box flex-ac line-box">
                <div class="iconSize-125 icon_yh mar-r"></div>
                <div class="flex-f1 bor-b-g">
                    <input class="wd-fh input-ol-n" placeholder="请输入用户名"/>
                </div>
            </div>
            <div class="flex-box flex-ac tx-line">
                请输入3-16位英文或数字的组合，提交后不可修改
            </div>
            <!-- 请输入手机号 -->
            <div class="flex-box flex-ac line-box">
                <div class="iconSize-125 icon_sj mar-r"></div>
                <div class="flex-f1 bor-b-g">
                    <input class="wd-fh input-ol-n" type="number" placeholder="请输入手机号"/>
                </div>
            </div>
            <div class="flex-box flex-ac tx-line">
                请输入您的手机号码
            </div>
            <!-- 请输入密码 -->
            <div class="flex-box flex-ac line-box">
                <div class="iconSize-125 icon_mm mar-r"></div>
                <div class="flex-f1 bor-b-g">
                    <input class="wd-fh input-ol-n" :type="inputType" placeholder="请输入密码"/>
                </div>
                <div class="flex-bap psw-but" @click="togPsw()"> 
                    <div :class="{
                    'psw-look' : !psdStatuas,
                    'psw-nolook' : psdStatuas,
                    }"></div>
                </div>
            </div>
            <div class="flex-box flex-ac tx-line">
                请输入6-20位英文或数字的组合
            </div>
            <!-- 请再次输入密码 -->
            <div class="flex-box flex-ac line-box">
                <div class="iconSize-125 icon_mm mar-r"></div>
                <div class="flex-f1 bor-b-g">
                    <input class="wd-fh input-ol-n" type="password" placeholder="请再次输入密码"/>
                </div>
            </div>
            <div class="flex-box flex-ac tx-line">
                请再次输入密码
            </div>
            <!-- 请输入QQ帐号 -->
            <div class="flex-box flex-ac line-box">
                <div class="iconSize-125 icon_qq mar-r"></div>
                <div class="flex-f1 bor-b-g">
                    <input class="wd-fh input-ol-n" type="number" placeholder="请输入QQ帐号"/>
                </div>
            </div>
            <div class="flex-box flex-ac tx-line">
                请输入真实的QQ帐号
            </div>
            <!-- 请输入真实姓名 -->
            <div class="flex-box flex-ac line-box">
                <div class="iconSize-125 icon_name mar-r"></div>
                <div class="flex-f1 bor-b-g">
                    <input class="wd-fh input-ol-n" placeholder="请输入真实姓名"/>
                </div>
            </div>
            <div class="flex-box flex-ac tx-line">
                姓名必须与您银行卡的账户姓名相同，否则不能提现
            </div> 
            <div class="submit-btn register" @click="registerSub">注册</div> 
            <div class="cancel-btn" @click="goLogin">已有账号，去登录</div> 
        </div>
        <!-- 登录 -->
    </div>
</template>
<script type="text/ecmascript-6">
import 'common/css/user.css'
import MHeader from '../../components/m-header'
import Trans from '../../common/js/eventTrans'
import { register } from '../../common/js/axiosUtil' 
import { setCookie } from '../../common/js/cookie'
import { getClass } from '../../common/js/common'
export default {
    data () {
        return {
            psdStatuas : false,
            inputType : 'password',
            rememberStatuas : false
        }
    },
    methods: {
        goLogin () {
            this.$router.push('/login')
        },
        registerSub (){
            // 通过ClassName获取需填项
            const arr = getClass("input-ol-n")
            // 判断各项是否已填写
            if(this.$checkWrite(arr)){
                return
            }
            // 检查两次密码是否一致
            if(arr[3].value != arr[4].value){
                this.$alert("两次输入新密码不一致，请重新确认")
                return
            }
            this.$toast('注册中...', 1000000)
            let params = this.$params(0)
            params.append('introducer', arr[0].value)
            params.append('username', arr[1].value)
            params.append('phone', arr[2].value)
            params.append('password', arr[3].value)
            params.append('qq', arr[5].value)
            params.append('realname', arr[6].value)
            register(params)
            .then((response)=> { 
                this.$toastClose()
                if(response.data.code == "200"){
                    this.$toast('注册成功', 2000)
                    const {data} = response.data
                    // 注册成功默认登录成功，个人信息默认当次有效
                    sessionStorage.setItem('userInfo',JSON.stringify(data)) 
                    // 注册成功缓存用户名密码，下次登录免输入
                    let userNamePsw = {'username': arr[1].value, 'password': arr[3].value}
                    setCookie('userNamePsw', JSON.stringify(userNamePsw), 7)
                    // 更新store数据
                    this.$store.commit('SET_USERINFO')
                    this.$store.state.loginAlert = true
                    this.$store.state.bindingName = ''
                    // 刷新首页查询姓名方法
                    Trans.$emit('checkUserkName')
                    // 跳转购彩中心
                    let _this = this
                    setTimeout(function(){
                        _this.$toastClose()
                        _this.$router.push('/recommend') 
                    }, 1000)
                }else{
                    if(response.data.msg){
                        this.$alert(response.data.msg)
                    }else{
                        this.$toast('请求超时', 2000)
                    }
                }
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            });
        }
    },
    components: {
        MHeader
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
.scroll-box
    position: fixed
    width: 100%
    top: 2.75rem
    bottom: 0
    background: white
    font-size: $fonts-14
    padding-top: .5rem
    overflow: auto
.scroll-box::-webkit-scrollbar
    display: none
.line-box
    padding: .5rem 1rem
    line-height: 2rem
.mar-r
    margin-right: .5rem
.psw-but
    height : 2rem
    width : 2rem
    border-bottom : 1px solid $color-f0
.register 
    margin-top : 1.5rem
.tx-line
    color : $color-6
    font-size : $fonts-12
    margin : 0 1rem .25rem 2.75rem
.inp
    outline : none
    background-color : white !important
</style>

